<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="40%"
    top="13vh"
    :before-close="closeHandle"
    :close-on-click-modal="false">

    <div class="key">
      结构键：{{ structKey }}
    </div>
    <div class="key">
      数据键：{{ valueKey }}
    </div>

    <vue-json-viewer :value="viewData" boxed expanded></vue-json-viewer>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeHandle">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  // json格式化显示组件
  import VueJsonViewer from 'vue-json-viewer/ssr'
  // json格式化显示组件样式
  import 'vue-json-viewer/style.css'

  export default {
    name: "json-view-dialog",
    components: { VueJsonViewer },
    props: {
      // 弹出框是否显示
      dialogVisible: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        // 弹出框标题
        dialogTitle: '',
        // 缓存结构key值
        structKey: '',
        // 数值key值
        valueKey: '',
        // json格式显示的对象
        viewData: {}
      }
    },
    methods: {
      /**
       * 初始化json数据显示弹出框方法
       * @param {string} dialogTitle 弹出框标题
       * @param {Object} data        弹出框显示的数据
       */
      initJsonViewDialog(dialogTitle, data) {
        this.dialogTitle = dialogTitle
        this.structKey = data.structKey
        this.valueKey = data.valueKey
        this.viewData = data.data
      },
      /**
       * 弹出框关闭处理事件
       */
      closeHandle() {
        this.dialogTitle = ''
        this.viewData = {}

        // 向上传递事件
        this.$emit('close-json-view-dialog')
      },
    }
  }
</script>

<style scoped>
  .key {
    padding: 10px 0;
  }
  .key:first-child {
    padding-top: 0;
  }
</style>
